import { BrowserRouter as Router, Route, Switch, Redirect } from "react-router-dom"
import React, { Component, lazy, Suspense } from 'react'
import config from "./config"
import RouteHook from "./RouteHook"
import Loading from "./Loading"
// config.routes[0].children[0].component2 = Index //import(config.routes[0].children[0].component2)
// console.log(require("@/pages/index/Index").default)
// var test = "@/pages/index/Index"
// var a =lazy(()=>import(test))
// console.log(a)

// console.log(config.routes[0].children[0])
// var test = "index/Index"
// console.log(require(`@/pages/${test}`).default )
// var _import = (page) => lazy(() => import(`@/pages/${page}`))
export default class index extends Component {
  render() {
    return (
      <div>
        <Router basename={config.basename}>
          <Suspense fallback={<Loading spinning={true} />}>
            <Switch>
              {
                myRoute(config.routes)
              }
              <Route render={() => <Redirect to={"/404"} />} />
            </Switch>
          </Suspense>
        </Router>
      </div>
    )
  }
}
function myRoute(routes) {
  if (routes && routes.length) {
    return routes.map((item, index) => {
      return <Route
        exact={item.exact || false}
        path={item.path}
        key={item.path || index}
        render={props => {
          return item.render || item.render ? item.render() : <RouteHook RouteCom={item.component} beforeEach={config.beforeEach} meta={item.meta || {}} {...props}>
            <Switch>
              {
                myRoute(item.children)
              }
              <Route render={() => <Redirect to={"/404"} />} />
            </Switch>
          </RouteHook>
        }}
      ></Route>
    })
  } else {
    return ""
  }

}

// function MyRoute(props) {

//   let routes = props.routes
//   if (routes && routes.length) {
//     return (
//       <div>
//         {
//           routes.map((item, index) => {
//             // item.lazy = item.lazy==undefined?true:item.lazy;
//             // console.log(item.lazy)
//             // item.RouteCom=item.component?(item.lazy?lazy(()=>import(`@/pages/${item.component}`)):require(`@/pages/${item.component}`).default):"";
//             // console.log(item.RouteCom)
//             return (
//               <Fragment key={item.path || index}>
//                 <Route
//                   exact={item.exact  ||  false}
//                   path={item.path } 

//                   render={props => {
//                     // item.component2?item.component2() :
//                   return item.render || item.render ?item.render() : <RouteHook RouteCom={  item.component } beforeEach={config.beforeEach} meta={item.meta ||{} } {...props}>

//                         <MyRoute routes={item.children} />

//                       </RouteHook> 
//                   }}
//                 ></Route>
//               </Fragment>
//             )
//           })
//         }
//       </div>
//     )
//   }
//   return ""
// }


